<template>
  <div class="content">
    <el-form inline :model="formData">
      <el-form-item label="时间">
        <el-date-picker
          type="datetime"
          placeholder="选择查询时间"
          size="mini"
          v-model="formData.endTime"
          default-time="HH:mm:ss"
        ></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="mini" @click="getSearch"
          >查询</el-button
        >
      </el-form-item>
    </el-form>
    <div class="contentBoxs" v-loading="loadingEcharts">
      <div
        class="sectionChartbox"
        style="height: 55vh"
        v-for="item in crosswiseList"
        :key="item.id"
        :id="'crosswise' + item.id"
      ></div>
      <div
        class="sectionChartbox"
        style="height: 36vh"
        v-for="item in lengthwaysList"
        :key="item.id"
        :id="'lengthways' + item.id"
      ></div>
    </div>
  </div>
</template>
<script>
import Axios from "axios";
import moment from "moment";
import echarts from "echarts";
import * as serviceApi from "../../../common/service.config";

Axios.defaults.withcredentials = true;

export default {
  data() {
    return {
      formData: {
        endTime: moment().format("YYYY-MM-DD HH:mm:ss"),
      },
      idCross: "",
      nameCross: "",
      idLength: "",
      nameLength: "",
      crosswiseList: [], //横剖面数据
      lengthwaysList: [], //纵剖面数据
      dialogVisible: false,
      isFull: false, //false为放大，true为缩小
      crosswiseChart: null,
      lengthwaysChart: null,
      loading: false,
      loadingEcharts: true,
      monitorId: sessionStorage.getItem("monitorId"),
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.getSearch();
    });
  },
  methods: {
    getSearch() {
      this.loadingEcharts = true;

      Axios({
        url: serviceApi.KB_API,
        method: "post",
        data: `appMsg={"parameter":"{\\"monitorId\\":\\"${this.monitorId}\\",\\"endTime\\":\\"${moment(
          this.formData.endTime
        ).format(
          "YYYY-MM-DD HH:mm:ss"
        )}\\"}","serviceCode":"listOneDayDataByGroupProcessor","timestamp":"","uuid":""}`,
      }).then((res) => {
        let date = res.data.parameter;
        let dataArr = [];
        // 按type分数组
        date.map((mapItem) => {
          if (dataArr.length == 0) {
            dataArr.push({ type: mapItem.type, List: [mapItem] });
          } else {
            let res = dataArr.some((item) => {
              //判断相同日期，有就添加到当前项
              if (item.type == mapItem.type) {
                item.List.push(mapItem);
                return true;
              }
            });
            if (!res) {
              //如果没找相同日期添加一个新对象
              dataArr.push({ type: mapItem.type, List: [mapItem] });
            }
          }
        });

        if (dataArr[0].List) {
          this.crosswiseList = dataArr[0].List;

          // console.log(this.crosswiseList);
          // let data = dataArr[0].List;
          for (let i = 0; i < this.crosswiseList.length; i++) {
            var topValue = [];
            var bottomValue = [];
            var horizontalValue = [];
            var nozzleHeight = [];
            var argumentL = [];
            var stealthDate = [];
            var sensorName = [];
            let nameCross = this.crosswiseList[i].name;
            for (let j = 0; j < this.crosswiseList[i].list.length; j++) {
              for (
                let k = 0;
                k < this.crosswiseList[i].list[j].sensorList.length;
                k++
              ) {
                topValue[k] = Number(
                  this.crosswiseList[i].list[j].sensorList[k].topValue
                ).toFixed(3);

                bottomValue[k] = Number(
                  this.crosswiseList[i].list[j].sensorList[k].bottomValue
                ).toFixed(3);

                horizontalValue[k] = Number(
                  this.crosswiseList[i].list[j].sensorList[k].horizontalValue
                ).toFixed(3);

                nozzleHeight[k] = Number(
                  this.crosswiseList[i].list[j].sensorList[k].nozzleHeight
                ).toFixed(3);

                argumentL[k] = Number(
                  this.crosswiseList[i].list[j].sensorList[k].argumentL
                ).toFixed(3);
                stealthDate[k] = Number(
                  this.crosswiseList[i].list[j].sensorList[k].topValue -
                    this.crosswiseList[i].list[j].sensorList[k].bottomValue
                ).toFixed(3);
                sensorName[k] =
                  this.crosswiseList[i].list[j].sensorList[k].sensorName;
              }
            }
            // this.crosswiseChart = echarts.init(
            //   document.getElementById(this.idCross)
            // );
            this.idCross = `crosswise${this.crosswiseList[i].id}`;
            // console.log(this.idCross);
            this.crosswise(
              this.idCross,
              topValue,
              bottomValue,
              horizontalValue,
              argumentL,
              nozzleHeight,
              sensorName,
              stealthDate,
              nameCross
            );
          }
          // this.loading = false;
          this.$emit("loadingOn", this.loading);
        }
        this.loadingEcharts = false;

        // if (dataArr[1].List) {
        //   this.lengthwaysList = dataArr[1].List;
        // }
      });
    },
    crosswise(
      idCross,
      topValue,
      bottomValue,
      horizontalValue,
      argumentL,
      nozzleHeight,
      sensorName,
      stealthDate,
      nameCross
    ) {
      setTimeout(function () {
        this.crosswiseChart = echarts.init(document.getElementById(idCross));
        this.crosswiseChart.showLoading();
        let chartOption = {
          title: {
            text: nameCross + "渗流压力分布图",
            left: "center",
          },
          tooltip: {
            trigger: "axis",
            formatter(params) {
              let tip = params[0].name + "<br/>";
              for (let y = 0; y < params.length; y++) {
                if (params[y].value != "NaN") {
                  if (params[y].seriesName != "管底高程") {
                    tip +=
                      params[y].marker +
                      params[y].seriesName +
                      " : " +
                      params[y].value +
                      "m<br/>";
                  }
                }
              }
              return tip;
            },

            backgroundColor: "transparent", //标题背景色
            borderColor: "#333", //边框颜色
            borderWidth: 0, //边框线宽
            padding: 5,
            textStyle: {
              color: "#333",
            },
          },
          grid: {
            left: "3%",
            right: "4%",
            bottom: "3%",
            containLabel: true,
          },
          toolbox: {
            feature: {
              saveAsImage: {
                show: true,
              },
              // show: true,
              // myFull: {
              //   show: true,
              //   title: this.isFull == true ? "取消全屏" : "全屏",
              //   icon: "path://M358.4 768H426.666667v85.333333H213.333333v-213.333333h85.333334v68.266667l128-128 59.733333 59.733333-128 128z m345.6 0l-128-128 59.733333-59.733333 132.266667 132.266666V640h85.333333v213.333333h-213.333333v-85.333333h64zM358.4 298.666667l128 128-59.733333 59.733333-128-128V426.666667H213.333333V213.333333h213.333334v85.333334H358.4z m345.6 0H640V213.333333h213.333333v213.333334h-85.333333V354.133333l-132.266667 132.266667-59.733333-59.733333 128-128z",
              //   onclick: function () {
              //     let elementId = self.elementId;
              //     if (!self.isFull) {
              //       elementId = "fullScreen";
              //     }
              //     setTimeout(() => {
              //       self.$nextTick(() => {
              //         self.crosswise(elementId);
              //       });
              //     }, 10);
              //     self.isFull = !self.isFull;
              //   },
              // },
            },
          },
          xAxis: {
            type: "category",
            boundaryGap: false,
            axisLine: { onZero: true },
            splitLine: { show: false },
            splitArea: { show: false },
            data: sensorName,
            axisLabel: { interval: 0 },
          },
          yAxis: {
            name: "高程(m)",
            type: "value",
            max: 35,
            scale: true,
          },
          series: [
            {
              name: "坝面",
              type: "line",
              data: topValue,
              itemStyle: {
                normal: { color: "#333", label: { show: true } },
              },
              connectNulls: true,
            },

            {
              name: "水位高程",
              type: "line",
              data: nozzleHeight,
              itemStyle: {
                normal: { color: "skyblue", label: { show: true } },
              },
              connectNulls: true,
              smooth: true,
            },
            //最下面隐形的柱子
            {
              name: "管底高程",
              type: "bar",
              stack: "one",
              itemStyle: {
                barBorderColor: "rgba(0,0,0,0)",
                color: "rgba(0,0,0,0)",
              },

              barWidth: 5,
              data: bottomValue,
            },
            {
              name: "渗压管长",
              type: "bar",
              stack: "one",
              data: stealthDate,
              itemStyle: {
                barBorderColor: "rgba(0,0,0,0)",
                color: "rgba(255,220,130,1)",
                borderType: "solid",
              },
              barWidth: 5,
            },
          ],
        };
        this.crosswiseChart.clear();
        this.crosswiseChart.setOption(chartOption);
        setTimeout(function () {
          window.onresize = function () {
            this.crosswiseChart.resize();
          };
        }, 200);
        this.crosswiseChart.hideLoading();
      }, 350);
    },
    lengthways(idLength) {
      this.lengthwaysChart = this.$echarts.init(
        document.getElementById(idLength)
      );
      let chartOption = {
        title: {
          text: this.nameLength,
          left: "center",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            crossStyle: {
              color: "#283b56",
            },
          },
        },
        toolbox: {
          feature: {},
        },
        xAxis: [
          {
            type: "category",
            data: ["up7-1", "up13-1", "up18-1"],
            axisPointer: {
              type: "shadow",
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "高程(mm)",
          },
        ],
        series: [
          {
            name: "降水量",
            type: "bar",
            barWidth: 8,
            data: [2.6, 2.5, 2.6],
            itemStyle: {
              barBorderColor: "rgba(0,0,0,0)",
              color: "rgba(11,220,230,1)",
            },
          },
          {
            name: "水位高程",
            type: "line",
            // yAxisIndex: 1,
            data: [2.6, 2.5, 2.6],
            itemStyle: {
              barBorderColor: "rgba(0,0,0,0)",
              color: "#111",
            },
          },
        ],
      };
      this.lengthwaysChart.clear();
      this.lengthwaysChart.setOption(chartOption);
      setTimeout(function () {
        window.onresize = function () {
          this.lengthwaysChart.resize();
        };
      }, 200);
    },
  },
};
</script>
<style lang="less" scoped>
.content {
  width: 100%;
  height: 86vh;
  overflow-x: hidden;
  margin: 0 auto;
  .contentBoxs {
    position: absolute;
    // top: 10%;
    // padding-left: 25%;
    // padding-right: 5%;
    // box-sizing: border-box;
    width: 100%;
    height: 80vh;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    .sectionChartbox {
      // border: 1px solid black;
      width: 95%;
      margin-bottom: 5%;
      color: #111;
    }
  }
}
.chart {
  width: 400px;
  height: 300px;
  border: 1px solid black;
}
</style>